<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
          <!-- 按钮部分 -->
        <el-row>
          <el-col>
            <el-button type="primary" size="mini" @click="$router.push('/questions/new')">
             <!-- $t(语言名称)代表获得具体语言信息 
                $t是语言包给Vue实例增加好的成员方法
                Vue.prototype.$t = function(){}
              -->
              {{$t('question.newadd')}}
            </el-button>
            <el-button type="danger" size="mini">
                 {{$t('question.manyadd')}}
            </el-button>
          </el-col>
        </el-row>
        <!-- gutter给列设置间距，单位像素 -->
        <el-row :gutter="5">
           <!-- span设置各个列占据的宽度，单位是“权”，总数为24 -->
           <el-col :span="6">学&nbsp;&nbsp;&nbsp;&nbsp;科：
             <!-- 没有数据数据的时候,el-option不要设置，会报错 --> 
           <el-select v-model="searchForm.subjectID" placeholder="请选择" class="wd">
             <el-option
             v-for="item in subjectIDList"
             :key="item.value"
                :value="item.value"
                :label="item.label"
             ></el-option>
           </el-select>
           </el-col>
           <el-col :span="6">难&nbsp;&nbsp;&nbsp;&nbsp;度：
            <el-select v-model="searchForm.difficulty" placeholder="请选择" class="wd">
               <el-option
                v-for="item in difficultyList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-col>
           <el-col :span="6">试题类型：
            <el-select v-model="searchForm.questionType" placeholder="请选择" class="wd">
              <el-option
                v-for="item in questionTypeList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-col>
           <el-col :span="6">
             标&nbsp;&nbsp;&nbsp;&nbsp;签：
             <el-select v-model="searchForm.tags" placeholder="请选择" class="wd">
                <el-option
                v-for="item in tagsList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
             </el-select>
           </el-col>
        </el-row>
        <el-row :gutter="5">
      <el-col :span="6">
        城&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;市：
        <el-select
         v-model="searchForm.province" 
         placeholder="选城市"
          style="width:85px;"
           @change="searchForm.city=''"
          >
            <!-- @change作用：城市更新了，要清除之前选取的“区县”数据 -->
            <!-- 
                模板中直接遍历使用methods方法的返回数据
                注意：设置()括号
                data、methods方法都可以被v-for遍历应用 
              -->
              <el-option
                v-for="(item,k) in provinces()"
                :key="k"
                :label="item"
                :value="item"
              ></el-option>
        </el-select>
        <el-select v-model="searchForm.city" placeholder="选地区" style="width:85px;">
          <!-- citys是methods方法，被遍历使用 -->
              <el-option
                v-for="(item,k) in citys(searchForm.province)"
                :key="k"
                :label="item"
                :value="item"
              ></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        关&nbsp;键&nbsp;字：
        <el-input type="text" v-model="searchForm.keyword" class="wd"></el-input>
      </el-col>
      <el-col :span="6">
        题目备注：
        <el-input type="text" v-model="searchForm.remarks" class="wd"></el-input>
      </el-col>
      <el-col :span="6">
        企业简称：
        <el-input type="text" v-model="searchForm.shortName" class="wd"></el-input>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">
        方&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向：
        <el-select v-model="searchForm.direction" placeholder="请选择" class="wd">
           <el-option
                v-for="(item,k) in directionList"
                :key="k"
                :label="item"
                :value="item"
              ></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        录&nbsp;入&nbsp;人：
        <el-select v-model="searchForm.creatorID" placeholder="请选择" class="wd">
           <el-option
                v-for="item in creatorIDList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              ></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        二级目录：
        <el-select v-model="searchForm.catalogID" placeholder="请选择" class="wd">
          <el-option
                v-for="item in catalogIDList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button size="mini">清除</el-button>
        <el-button type="primary" size="mini">搜索</el-button>
      </el-col>
    </el-row>
      <!-- 题库列表展示el-table/el-table-column -->
        <el-table :data="questionList" style="width:100%">
          <!-- type="index" 设置当前的列为序号 1/2/3/4... 序号列不用设置prop-->
          <el-table-column label="序号" type="index" width="60"></el-table-column>
          <el-table-column label="试题编号" prop="number"></el-table-column>
          <el-table-column label="学科" prop="subject"></el-table-column>

          <!-- formatter属性可以对当前column列的内容做二次更新 
            属性值是methods方法，注意，不要设置()括号
            formatter是el-table-column的属性，必须使用:进行绑定
          -->
          <el-table-column :formatter="questionTypeFMT" label="题型" prop="questionType"></el-table-column>

          <el-table-column label="题干" prop="question"></el-table-column>
          
             <!-- 过滤器场合限制：{{}}、:冒号属性绑定 -->
          <el-table-column label="录入时间" prop="addDate" width="170">
            <!-- 在el-table-column标签的内容区域中要获得具体的某个记录字段信息，如何做
            当前情况就是 addDate
            答：通过"作用域插槽"实现 -->
            <template slot-scope="stData">
              <!-- stData可以对记录的各个字段进行访问，但是需要通过 row 衔接
                stData.row 获取到当前遍历后的每个题库记录信息，是对象
                stData.row.xxx 获得记录的指定字段信息的
                row是关键字，始终需要存在
               -->
               <!-- 过滤器使用可以传递参数 -->
              {{stData.row.addDate | parseTimeByString()}} <!--年月日时分秒-->
              <!--{{stData.row.addDate | parseTimeByString('{y}-{m}-{d}')}} 年月日-->
            </template>
          </el-table-column>
         
          <el-table-column label="难度" prop="difficulty" :formatter="difficultyFMT"></el-table-column>
          <el-table-column label="录入人" prop="creator"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="stData">
            <!-- 如下内容也是插槽体现 
              具体是要把4个a标签填充到 el-table-column 的匿名插槽里边的
              组件要变型为具体的html标签
              html标签直接呈现了
            -->

            <a href="#">预览</a>
            <a href="#">修改</a>
           <!-- click单击事件，进行试题删除 
                请把被删除的目标当成参数给到删除事件里边
                通过"作用域插槽"方式获得被删除试题目标信息
                stData.row:代表被删除试题的整条记录对象

                slot-scope由于业务需要，其他的a标签会使用，为了避免编辑
                重复代码，就在外边设置template，统一应用

                给a标签设置click事件，click执行的同时a标签的默认行为也要执行
                (a标签会根据href的值做执行)
                我们需要：只执行click，href不要执行，即阻止浏览器的默认行为
                event.preventDefault()  js底层标准阻止方式
                但是我们要用vue方式阻止@click.prevent(对标准阻止代码做的封装)
              -->
            <a href="#" @click.prevent="del(stData.row)">删除</a>
            <a href="#">加入精选</a>
             </template>
          </el-table-column>
        </el-table>
      
       <!-- 分页效果 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.page"
          :page-sizes="[3, 5, 10, 20]"
          :page-size="searchForm.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tot"
        ></el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/questions' // 基础题库相关api导入
// 城市-区县
import { provinces, citys } from '@/api/hmmm/citys.js'
// 二级目录
import { simple as simpleDirectorys } from '@/api/hmmm/directorys.js'
// 录入人
import { simple as simpleUsers } from '@/api/base/users.js'
// 标签
// 注意：当前环境下边已经有simple，请as设置别名，避免冲突
import { simple as simpleTags } from '@/api/hmmm/tags.js'
// 导入“难度”、"题型"、“方向”常量，并设置别名
import { 
  difficulty as difficultyList,
  questionType as questionTypeList,
  direction as directionList
} from '@/api/hmmm/constants.js'
// 学科api导入
import {simple} from '@/api/hmmm/subjects.js'
export default {
  name: 'QuestionsList',
  watch: {
    // 对 searchForm 成员做深度监听
    // searchForm内部的成员发生变化都可以被感知
    searchForm: {
      handler: function(newV) {
        // 根据变化后的条件重新获得题库列表
        this.getQuestionList()
      },
      deep: true
    }
  },
  data() {
    return {
      catalogIDList: [], // 二级目录
      creatorIDList: [], // 录入人
      tagsList: [], // 标签
      // 创建成员list，接收“学科列表”数据
      // subjectIDList并不是搜索“表单域”部分，所以不要在searchform中体现
        subjectIDList: [],
       difficultyList,
       questionTypeList, // 题型，简易成员赋值
       directionList, // 方向，简易成员赋值
       questionList: [], // 基础题库列表信息

        tot: 0, // 试题总条数
       // 创建搜索表单对象
      searchForm: {
        // 名称来自api接口,是服务器端定义的
         page: 1, // 默认当前页码
        pagesize: 3, // 每页显示条数
        subjectID: '', // 学科
        difficuly: '', // 难度
        questionType: '', // 题型
        tags: '', // 标签
       province: '', // 城市
       city: '', // 地区
       keyword: '', // 关键字
       remarks: '', // 备注
       shortName: '', // 企业简称
       direction: '', // 方向
       creatorID: '', // 录入人
       catalogID: '' // 二级目录
      }
    }
  },
  created() {
     // 获得 基础题库 列表信息
  this.getQuestionList()
    // 二级目录
    this.getCatalogIDList()
    // 录入人
    this.getCreatorIDList()
    // 标签
    this.getTagsList()
    // 获得学科列表
   this.getSubjectIDList()
  },
  methods: {
    // 对城市、区县的api函数做接收，对象成员"简易赋值"
    // 不要给设置默认值
    // 这两个方法在template模板中可以直接调用
    provinces,
    citys,

    // 分页-每页条数变化的回调处理
    // 参数val:变化后的每页获取数据条数
    handleSizeChange(val) {
      // val:5
      // console.log(val)
      // 把val赋值给searchForm.pagesize成员--->watch--->getQuestionList-->list(this.searchForm)
      this.searchForm.pagesize = val
    },
    // 分页-当前页码变化的回调处理
    // 参数val:变化后的页码数据
    handleCurrentChange(val) {
      // 把val赋值给searchForm.page成员--->watch--->getQuestionList-->list(this.searchForm)
      this.searchForm.page = val
    },

    // 删除试题
    // 参数question：代表被删除试题的对象信息
    del(question) {
      // 确认框
      this.$confirm('确认要删除该试题么?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 确定的逻辑(async需要设置到await外边最近的function前边)
          const result = await remove(question)
          // 成功提示
          this.$message.success('删除成功！')
          // 数据刷新
          this.getQuestionList()
        })
        .catch(() => {
          // 取消逻辑
        })
      /**
      try{
        const cfm = await $confirm(xx)
      }catch(e){
        // 取消执行逻辑，同时停止后续代码执行
        return false
      }
      // 确认执行逻辑
      remove()
      success()
      getQuestionList() 
       */
    },

     // 难度数字转汉字
    difficultyFMT(row, column, cellValue) {
      return this.difficultyList[cellValue - 1].label
    },

    // 对“题型数据”做二次更新
    // row：代表当前的各个题库的记录信息，是一个对象
    //      row.addDate  row.answer row.city row.id
    //      row.xxx
    //      row可以访问到每条题库记录的全部字段信息
    // column: 可以获得数据记录列的信息，一般不使用
    // cellValue：当前正在被处理的列的单元信息
    //             当前情况cellValue与 row.questionType 一致
    // index: 代表各个立即的序号信息，从0开始计数
    // return返回的信息就可以覆盖渲染到模板的对应位置去，进而实现列数据的二次更新效果了
    questionTypeFMT(row, column, cellValue) {
      // 把 题型 数字 转为 汉字 应用，cellValue 就是题型的数字信息 1 2 3
      // cellValue=1  -----> 单选--->下标0[cellValue-1]
      // cellValue=2  -----> 多选--->下标1[cellValue-1]
      // cellValue=3  -----> 简答--->下标2[cellValue-1]
      return this.questionTypeList[cellValue - 1].label
    },

// 获得基础题库列表信息
async getQuestionList() {
   // 把查询数据的条件当参数配置给list方法
  var result = await list(this.searchForm)
  // 把获得好的题库列表信息赋予给 questionList 成员
  // result里边既有数据列表信息，也有总条数，请获取使用
  this.questionList = result.data.items
  // 接收总条数信息
      this.tot = result.data.counts
},
     // 获得二级目录
    async getCatalogIDList() {
      const result = await simpleDirectorys()
      this.catalogIDList = result.data
    },
    // 获得录入人
    async getCreatorIDList() {
      const result = await simpleUsers()
      // console.log(result)
      this.creatorIDList = result.data
    },

      // 获得标签
    async getTagsList() {
      // 调用api
      const result = await simpleTags()
      // console.log(result)
      // data接收
      this.tagsList = result.data
    },
    // 获得学科列表数据
    async getSubjectIDList() {
    // 调用api,任何api函数执行完毕都返回promise对象
    const result = await simple()
    this.subjectIDList = result.data
    }
  }
}
</script>

<style scoped>
 .wd {width:160px;}
 /* 搜索框的行设置外边距 */
.el-row {
  margin-bottom: 10px;
}
.el-table { 
  margin-top:20px;
  }
  /**分页样式 */
.el-pagination{margin-top:15px;}
</style>
